import { defineComponent, useAttrs } from 'vue'
import { toLine } from '@/utils/main'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import '../styles/index.scss'

export default defineComponent({
	name: 'infiniteMenu',
	props: {
		data: {
			type: Array,
			required: true
		},

		defaultActive: {
			type: String,
			default: ''
		},

		router: {
			type: Boolean,
			default: false
		}
	},

	setup(props, ctx) {
		let attrs = useAttrs
		
		// 封装一个渲染无线层级菜单的方法
		let renderMenu = data => {
			return data.map(item => {
				item.i = ElementPlusIconsVue[item.icon]
				let slots = {
					title: () => {
						return <>
							<item.i />
							<span>{item.name}</span>
						</>
					}
				}

				if (item.children && item.children) {
					return (
						<el-sub-menu index={item.index} v-slots={slots}>
							{renderMenu(item.children)}
						</el-sub-menu>
					)
				}

				return (
					<el-menu-item index={item.index}>
						<item.i />
						<span>{item.name}</span>
					</el-menu-item>
				)
			})
		}

		return () => {
			return (
				<el-menu default-active={props.defaultActive} router={props.router} {...attrs}>
					{renderMenu(props.data)}
				</el-menu>
			)
		}
	}
})
